<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
        <el-form :inline="true">
          <el-form-item>
            <el-input
              style="width: 350px"
              v-model="pagination.queryString"
              placeholder="咨询附件名/咨询附件URL/咨询作者名/咨询标题"
              clearable>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button size="mini" icon="el-icon-search" @click="handleCurrentChange(1)">搜索</el-button>
          </el-form-item>
        </el-form>
    </el-card>
    <div class="table-container">
    <el-table
      height="490"
      ref="multipleTable"
      :data="dataList"
      tooltip-effect="dark"
      style="width: 100%"
      border
      stripe>

      <el-table-column
        label="咨询名称"
        prop="articleName">
      </el-table-column>

      <el-table-column
        label="作者"
        prop="author"
        width="150">
      </el-table-column>

      <el-table-column
        label="咨询附件名"
        prop="name">
      </el-table-column>

      <el-table-column
        label="咨询URL"
        prop="url">
      </el-table-column>

      <el-table-column
        prop="icon"
        width="260px"
        label="操作">
        <template slot-scope="scope">

          <el-button  type="primary" icon="el-icon-view"  size="mini"  @click="handleDetailDialog(scope.row)">查看详情</el-button>


          <el-button type="warning" icon="el-icon-edit" size="mini" slot="reference" @click="handleDelete(scope.row)">删除</el-button>


        </template>
      </el-table-column>

    </el-table>
    </div>
    <div class="pagination-container">
    <el-pagination
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      :page-sizes="[10, 20, 50, 100]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total,sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>
    <el-dialog
      title="展示咨询附件详情的对话框"
      :visible.sync="dialogFormVisible"
      width="80%"
      :before-close="handleDetailFormClose">

      <el-descriptions style="padding: 10px;" :column="3"  size="small" border>
        <template v-if="formData">

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              附件
            </template>
            <p v-if="formData.name"> {{formData.name}}</p>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              栏目
            </template>
            <p v-if="formData.article"> {{formData.article.channelName}}</p>
          </el-descriptions-item>


          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              URL
            </template>
            <p v-if="formData.url"> {{formData.url}}</p>

          </el-descriptions-item>


          <template v-if="formData.article">
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                标题
              </template>
              <p v-if="formData.article.title">{{formData.article.title}}</p>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                配图
              </template>

              <el-image
                v-if="formData.article.titleImg"
                style="width: 200px; height: 200px"
                :src="formData.article.titleImg" fit="fit">
              </el-image>
              <el-image
                v-else
                style="width: 200px; height: 200px"
                src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/2021/09/26/1632590840656.jpg" fit="fit">
              </el-image>


            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                作者
              </template>
              <p v-if="formData.article.author">{{formData.article.author}}</p>
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                概要
              </template>
              <p v-if="formData.article.summary"> {{formData.article.summary}}</p>
            </el-descriptions-item>
          </template>


        </template>
      </el-descriptions>

    </el-dialog>
  </div>
</template>

<script>
import {selectArticleAttachment,deleteArticleAttachment,findByPage} from '@/api/attachment'
export default {
  name: "index",
  data() {
    return {

      pagination: {//分页数据模型数
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
        queryString:null//查询条件
      },
      dataList: [],//当前页要展示的分页列表数据
      formData: {
        id:'11',
        articleId:'11',
        name:'11',
        url:"11",
        article:{
          channelName:"12",
          title:"111",
          titleImg:"",
          summary:"1",
          author:"1"
        }

      },//表单数据

      dialogFormVisible: false,//查询附件咨询是否可见


    }
  },
  created() {
    this.findPage()

  },
  methods: {


    //弹出附件咨询详情窗口的方法
    handleDetailDialog(row) {
      console.info("【====系统正在弹出附件咨询详情窗口====】")
      this.resetForm()
      this.dialogFormVisible = true
      selectArticleAttachment(row.id).then(res=>{
        this.formData = res.data
      })
      console.info(`====【系统正在弹出附件咨询详情窗口成功！！并成功获取了ID为：${row.id}的附件咨询详情=====`)

    },

    //处理关闭附件咨询详情窗口的方法
    handleDetailFormClose() {
      //关闭查看咨询详情表单对话框
      this.dialogFormVisible = false
    },


    //处理删除的方法
    handleDelete(row) {
      //弹出删除对话框
      this.$confirm(`此操作将【永久删除】该${row.name}咨询附件, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteArticleAttachment(row.id).then(res=>{
          //弹出成功提示框，显示成功信息
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.handleCurrentChange(1)
            }
          });

        })
      }).catch(() => {
        // 点击取消后调用
        // 空着，防止报错
      });
    },



    //重置表单的方法
    resetForm() {
      this.formData = {}
    },


    //改变每页显示的条数
    handleSizeChange(pageSize) {
      //修改pagination.pageSize数据模型值，赋值为pageSize
      this.pagination.pageSize = pageSize
      //刷新表格
      this.findPage()
    },

    //切换页码
    handleCurrentChange(currentPage) {
      //修改pagination.currentPage数据模型值，赋值为currentPage
      this.pagination.currentPage = currentPage;
      //刷新表格
      this.findPage()
    },

    //处理分页查询的方法
    findPage() {
      //携带pagination对象，发送请求
      findByPage(this.pagination).then(res=>{
        this.dataList = res.data.rows;
        this.pagination.total = res.data.total;
      })


    },




  }
}
</script>

<style scoped>
.el-pagination {
  float: right;
  margin-top: 22px;
}
</style>
